<template>
  <div style="background-color: white">
    <div class="space"></div>
    <div class="panel">
      <div class="flex-c" STYLE="align-items: flex-start">
        <span class="des" v-text="info.title">123</span>
        <span class="time" v-text="getTime"></span>
      </div>
      <div class="money" v-text="getMoney"></div>
    </div>
    <div class="divider" style="margin-left: 3vw;width:97vw"></div>
    <time-line :items="stepList"></time-line>
    <link-opinion style="background-color: #f5f5f5"></link-opinion>
    <div class="footer">
      <btn-primary :btn-text="getText" @click.native="handleClick"></btn-primary>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Public from '@/assets/js/public';
  import TimeLine from '../../components/common/timeLine';
  import LinkOpinion from '../../components/common/LinkOpinion';
  import BtnPrimary from '../../components/common/BtnPrimary';
  import Moment from 'moment';
  import Types from '@/store/OperationType';

  export default {
    /** kebab-case */
    name: 'withdraw-step',

    data() {
      return {
        tips: JSON.parse(this.$route.query.tips),
        info: JSON.parse(this.$route.query.info),
        url: this.$route.query.url,
        stepList: [],
        finish: false
      };
    },
    /** 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
     String/Number/Boolean/Function/Object/Array/Symbol */
    props: {},

    components: {BtnPrimary, LinkOpinion, TimeLine},

    methods: {
      getIcon(icon) {
        return Public.ossImg + icon + '.svg';
      },
      handleClick() {
        // if (this.finish) {
        this.$router.push({name: 'user'});
        // }
      },
      dateFormat(val) {
        return Moment(val).format('YYYY-MM-DD HH:mm:ss');
      },
      doWithdraw() {
        this.stepList.push({content: this.tips.msg, time: this.dateFormat(new Date(this.tips.time * 1000))});
        console.log('kkkkk110000', this.url, {info: this.info});
        this.$UserReq.getWithdrawStepResult(this.url, {info: this.info})
          .then((res) => {
              console.log('kkkkk111', res);
              this.stepList.push({content: res.data.tips.msg, time: this.dateFormat(new Date(res.data.tips.time * 1000))});
              if (res.data.method === 'over') {
                this.finish = true;
              } else {
                this.$UserReq.getWithdrawStepResult(res.data.url, {info: res.data.info})
                  .then((res) => {
                      console.log('kkkkkk222', res);
                      this.stepList.push({content: res.data.tips.msg, time: this.dateFormat(new Date(res.data.tips.time * 1000))});
                      if (res.data.method === 'over') {
                        this.finish = true;
                      } else {
                        this.$UserReq.getWithdrawStepResult(res.data.url, {info: res.data.info})
                          .then((res) => {
                              console.log('kkkkkk333', res);
                              this.stepList.push({
                                content: res.data.tips.msg,
                                time: this.dateFormat(new Date(res.data.tips.time * 1000))
                              });
                              if (res.data.method === 'over') {
                                this.finish = true;
                              } else {
                                console.log(4, this.finish);
                              }
                              this.$store.commit(Types.SET_CAN_DO_WITHDRAW, false);
                            },
                            () => {
                              this.$store.commit(Types.SET_CAN_DO_WITHDRAW, false);
                            });
                      }
                    },
                    () => {
                      this.$store.commit(Types.SET_CAN_DO_WITHDRAW, false);
                    });
              }
            },
            () => {
              this.$store.commit(Types.SET_CAN_DO_WITHDRAW, false);
            }
          );
      }
    },
    computed: {
      getMoney() {
        return '¥' + this.info.money;
      },
      getTime() {
        return Moment(this.info.time * 1000).format('YYYY-MM-DD');
      },
      getText() {
        if (this.finish === true) {
          return '完成';
        } else {
          return '请等待';
        }
      }
    },
    watch: {
      // 监听具体数据变化，并做相应的处理
    },
    created() {
      // console.log('with', this.$store.state.withdraw.canDoWithdraw);
      if (this.$store.state.withdraw.canDoWithdraw) {
        this.doWithdraw();
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .flex-r
    flex-x()

  .flex-c
    flex-y()

  .center
    flex-center()

  .divider
    divider()

  .space
    space()

  .panel
    flex-x()
    padding 10px

  .text
    word-main()
    margin 1vw 0

  .des
    word-big()

  .time
    margin-top 1vw
    word-vw(14px, third-ash)

  .money
    word-vw(18px, first-ash)

  .footer
    position fixed
    bottom 0
    height 14vw
    width 100vw
    flex-center()
    background-color transparent
</style>
